import React, { useState, useEffect } from 'react';
import _ from 'lodash';
import { Card, Row, Col, Tooltip } from 'antd';
// import MyIcon from '../../../components/MyIcon';

require('../../../utils/iconfont');

const SmallCard = props => {
  const { detailsItems, storeSaleRateData, orgIds, tabsKeys } = props;
  const [listLength, setListLength] = useState(0);
  const [list, setList] = useState(detailsItems);

  useEffect(() => {
    if (tabsKeys === '1') setList(detailsItems);
    if (orgIds.page === 'deposit' && tabsKeys === '2' && storeSaleRateData.length > 0)
      setList(storeSaleRateData);
  }, [tabsKeys]);
  useEffect(() => {
    if (list.length > 0) {
      const filterList = _.filter(list, x => x.isDisplay);
      if (filterList.length > 5) {
        setListLength(5);
      } else {
        setListLength(filterList.length);
      }
    }
  }, [list]);

  return (
    <Row gutter={[10, 10]} type="flex" className="small-card">
      {list.map(val => {
        let element = <></>;
        if (val.isDisplay) {
          element = (
            <Col style={{ width: `calc(100% / ${listLength})` }} key={val.name}>
              <Card>
                <Row type="flex" justify={val.icon ? 'space-between' : 'center'} align="middle">
                  {val.icon ? (
                    <Col className="icon-bg" style={{ background: val.icon.iconBg }}>
                      <svg
                        className="icon"
                        aria-hidden="true"
                        style={{ color: val.icon.subIconBg }}
                      >
                        <use xlinkHref={`#${val.icon.iconType}`} />
                        <style jsx>
                          {`
                            .icon {
                              width: 1em;
                              height: 1em;
                              vertical-align: -0.15em;
                              fill: currentColor;
                              overflow: hidden;
                            }
                          `}
                        </style>
                      </svg>
                    </Col>
                  ) : null}
                  <Col
                    span={val.icon ? 16 : 24}
                    style={{ textAlign: val.icon ? 'right' : 'center' }}
                  >
                    <Tooltip
                      placement="top"
                      title={val.company !== '' ? `${val.name}(${val.company})` : `${val.name}`}
                    >
                      <div className="text-ellipsis">
                        <span className="snb-title">
                          {val.company !== '' ? `${val.name}(${val.company})` : `${val.name}`}
                        </span>
                      </div>
                    </Tooltip>
                    <span
                      className="font-size22"
                      style={{ textAlign: val.icon ? 'right' : 'center' }}
                    >
                      {val.value}
                    </span>
                  </Col>
                </Row>
              </Card>
            </Col>
          );
        }
        return element;
      })}
    </Row>
  );
};

export default SmallCard;
